<script setup>
import TopHeader from "../components/TopHeader.vue";
import EventSituationLeft from "../components/EventSituationLeft.vue";
import EventSituationRight from "../components/EventSituationRight.vue";
import PatyLeft from "../components/PatyLeft.vue";
import PatyRight from "../components/PatyRight.vue";
import ITleft from "../components/ITleft.vue";
import ITright from "../components/ITright.vue";
import ThingsLeft from "../components/ThingsLeft1.vue";
import ThingsRight from "../components/ThingsRight.vue";
import FireLeft from "../components/FireLeft.vue";
import FireRight from "../components/FireRight.vue";
import ChanyeLeft from "../components/ChanyeLeft.vue";
import ChanyeRight from "../components/ChanyeRight.vue";
import ChanyeBLinLeft from "../components/ChanyeBLinLeft.vue";
import ChanyeBLinRight from "../components/ChanyeBLinRight.vue";
import JiankongLeft from "../components/JiankongLeft.vue";
import JiankongRight from "../components/JiankongRight.vue";
import FanhuiBottom from "../components/FanhuiBottom.vue";
import ThingsBottom from "../components/ThingsBottom.vue";
import BottomTitle from "../components/BottomTitle.vue";
import Bottomjiankong from "../components/Bottomjiankong.vue";
import { ref } from "vue";
import router from "@/router";
</script>

<template>
  <main>
    <div class="box">
      <div class="top">
        <TopHeader :info="sendnumber" />
      </div>
      <div class="box-middle">
        <div class="left">
          <transition name="slide1" class="slideleft">
            <PatyLeft
              key="PatyLeft"
              v-if="showLeft2"
              @sendData="handleDataFromChild"
            />
          </transition>
          <transition name="slide1" class="slideleft">
            <EventSituationLeft v-if="showLeft1" key="EventSituationLeft" />
          </transition>
          <transition name="slide1" class="slideleft">
            <ITleft v-if="showLeft5" key="ITleft" />
          </transition>
          <transition name="slide1" class="slideleft">
            <ThingsLeft v-if="showLeft6" key="ThingsLeft" />
          </transition>
          <transition name="slide1" class="slideleft">
            <FireLeft v-if="showLeft7" key="FireLeft" />
          </transition>
          <transition name="slide1" class="slideleft">
            <ChanyeLeft v-if="showLeft3" key="ChanyeLeft" />
          </transition>
          <transition name="slide1" class="slideleft">
            <ChanyeBLinLeft v-if="showLeft8" key="ChanyeBLinLeft" />
          </transition>
          <transition name="slide1" class="slideleft">
            <JiankongLeft v-if="showLeft31" key="JiankongLeft" />
          </transition>
        </div>
        <div class="right">
          <transition name="slide2" class="slideright">
            <PatyRight key="PatyRight" v-if="showRight2" />
          </transition>
          <transition name="slide2" class="slideright">
            <EventSituationRight
              @sendData="handleDataFromChild"
              v-if="showRight1"
              key="EventSituationRight"
            />
          </transition>
          <transition name="slide2" class="slideright">
            <ITright v-if="showRight5" key="ITright" />
          </transition>
          <transition name="slide2" class="slideright">
            <ThingsRight v-if="showRight6" key="ThingsRight" />
          </transition>
          <transition name="slide2" class="slideright">
            <FireRight v-if="showRight7" key="FireRight" />
          </transition>
          <transition name="slide2" class="slideright">
            <ChanyeRight v-if="showRight3" key="ChanyeRight" />
          </transition>
          <transition name="slide2" class="slideright">
            <ChanyeBLinRight
              @sendData="handleDataFromChild"
              v-if="showRight8"
              key="ChanyeBLinRight"
            />
          </transition>
          <transition name="slide2" class="slideright">
            <JiankongRight
              @sendData="handleDataFromChild"
              v-if="showRight31"
              key="JiankongRight"
            />
          </transition>
        </div>
      </div>
      <div class="bottom">
        <transition name="slide3" class="slidebottom">
          <BottomTitle @sendData="handleDataFromChild" v-if="showBottom1"
        /></transition>
        <transition name="slide3" class="slidebottom">
          <Bottomjiankong
            @sendData="handleDataFromChild"
            v-if="showBottomjiankong"
        /></transition>
        <transition name="slide3" class="slidebottom">
          <ThingsBottom @sendData="handleDataFromChild" v-if="showThingsBottom"
        /></transition>
        <transition name="slide3" class="slidebottom">
          <FanhuiBottom @sendData="handleDataFromChild" v-if="showfanhuiBottom"
        /></transition>
      </div>
    </div>
  </main>
</template>
<script>
export default {
  data() {
    return {
      showLeft1: true,
      showLeft2: false,
      showLeft3: false,
      showLeft5: false,
      showLeft6: false,
      showLeft7: false,
      showLeft8: false,
      showRight1: true,
      showRight3: false,
      showRight2: false,
      showRight5: false,
      showRight6: false,
      showRight7: false,
      showRight8: false,
      showBottom1: true,
      showLeft31: false,
      showRight31: false,
      showfanhuiBottom: false,
      showBottomjiankong: false,
      showThingsBottom: false,
      isPending: false,
      sendnumber: "",
    };
  },
  mounted() {
    window.show1Component = () => {
      // 执行函数逻辑
    };
    window.show2Component = () => {
      // 执行函数逻辑
    };
    window.handleDataFromChild = (number) => {
      console.log(number);
    };
  },
  methods: {
    handleDataFromChild(number) {
      if (number === "数字党建") {
        this.show1Component();
      } else if (number === "事件调度") {
        this.show2Component();
      } else if (number === "数字产业") {
        this.show3Component();
      } else if (number === "智能设备") {
        this.show5Component();
      } else if (number === "物联网") {
        this.show6Component();
      } else if (number === "消防感知") {
        this.show7Component();
      } else if (number === "治安监控") {
        this.show31Component();
      } else if (number === "柏林工业园") {
        this.show8Component();
      } else if (number === "AI分析看板") {
        router.push("/AIAnalysis");
      } else if (number === "数据分析看板") {
        router.push("/DataAnalysis");
      } else if (number === "党员详情") {
        this.showPatyN();
      } else if (number === "返回首页") {
        this.show2Component();
      } else if (number === "返回") {
        this.show5Component();
      }
      window.handleDataFromChild(number);
    },
    show1Component() {
      if (this.isPending) {
        return;
      }
      this.isPending = true;
      this.showLeft1 = false;
      this.showLeft3 = false;
      this.showRight3 = false;
      this.showLeft5 = false;
      this.showRight5 = false;
      this.showRight1 = false;
      this.sendnumber = "数字党建";
      setTimeout(() => {
        this.isPending = false;
        this.showLeft2 = true;
        this.showRight2 = true;

        console.log(this.number);
      }, 600);
      window.show1Component();
    },
    show2Component() {
      if (this.isPending) {
        return;
      }
      this.isPending = true;
      this.showLeft2 = false;
      this.showRight2 = false;
      this.showLeft3 = false;
      this.showRight3 = false;
      this.showLeft5 = false;
      this.showRight5 = false;

      this.showThingsBottom = false;
      this.showLeft8 = false;
      this.showRight8 = false;
      this.showLeft6 = false;
      this.showRight6 = false;
      this.showLeft7 = false;
      this.showRight7 = false;
      this.showBottomjiankong = false;
      this.sendnumber = "";
      setTimeout(() => {
        this.isPending = false;
        this.showLeft1 = true;
        this.showRight1 = true;
        this.showBottom1 = true;
      }, 600);
      window.show2Component();
    },
    show3Component() {
      if (this.isPending) {
        return;
      }
      this.isPending = true;
      this.showLeft1 = false;
      this.showLeft2 = false;
      this.showLeft5 = false;
      this.showRight2 = false;
      this.showRight1 = false;
      this.showRight5 = false;
      this.sendnumber = "";
      setTimeout(() => {
        this.isPending = false;
        this.showLeft3 = true;
        this.showRight3 = true;
      }, 600);
    },
    show5Component() {
      if (this.isPending) {
        return;
      }
      this.isPending = true;
      this.showLeft1 = false;
      this.showRight1 = false;
      this.showLeft2 = false;
      this.showLeft3 = false;
      this.showRight3 = false;
      this.showRight2 = false;
      this.showBottom1 = false;
      this.showLeft31 = false;
      this.showRight31 = false;
      this.showfanhuiBottom = false;
      this.sendnumber = "";
      setTimeout(() => {
        this.isPending = false;
        this.showLeft5 = true;
        this.showRight5 = true;
        this.showBottomjiankong = true;
        // this.showRight5 = true;
      }, 600);
    },
    show6Component() {
      if (this.isPending) {
        return;
      }
      this.isPending = true;
      this.showLeft1 = false;
      this.showRight1 = false;
      this.showLeft2 = false;
      this.showRight2 = false;
      this.showLeft3 = false;
      this.showRight3 = false;
      this.showBottom1 = false;
      this.showLeft5 = false;
      this.showRight5 = false;
      this.showBottomjiankong = false;
      this.sendnumber = "";
      setTimeout(() => {
        this.isPending = false;
        this.showLeft6 = true;
        this.showRight6 = true;
        this.showThingsBottom = true;
      }, 600);
    },
    show7Component() {
      if (this.isPending) {
        return;
      }
      this.isPending = true;
      this.showLeft1 = false;
      this.showRight1 = false;
      this.showLeft2 = false;
      this.showRight2 = false;
      this.showBottom1 = false;
      this.showLeft3 = false;
      this.showRight3 = false;
      this.showLeft5 = false;
      this.showRight5 = false;
      this.showLeft6 = false;
      this.showRight6 = false;
      this.showLeft8 = false;
      this.showRight8 = false;
      this.showBottomjiankong = false;
      this.sendnumber = "";
      setTimeout(() => {
        this.isPending = false;
        this.showLeft7 = true;
        this.showRight7 = true;
        this.showThingsBottom = true;
      }, 600);
    },
    show8Component() {
      if (this.isPending) {
        return;
      }
      this.isPending = true;
      this.showLeft1 = false;
      this.showRight1 = false;
      this.showLeft2 = false;
      this.showRight2 = false;
      this.showLeft3 = false;
      this.showRight3 = false;
      this.showLeft5 = false;
      this.showRight5 = false;
      this.showLeft6 = false;
      this.showRight6 = false;
      this.showBottomjiankong = false;
      this.showBottom1 = false;
      this.showLeft7 = false;
      this.showRight7 = false;
      this.sendnumber = "";
      setTimeout(() => {
        this.isPending = false;
        this.showLeft8 = true;
        this.showRight8 = true;
        this.showThingsBottom = true;
      }, 600);
    },
    show31Component() {
      if (this.isPending) {
        return;
      }
      this.isPending = true;
      this.showLeft5 = false;
      this.showRight5 = false;
      this.showBottomjiankong = false;
      this.sendnumber = "";
      setTimeout(() => {
        this.isPending = false;
        this.showLeft31 = true;
        this.showRight31 = true;
        this.showfanhuiBottom = true;
      }, 600);
    },
  },
};
</script>
<style scoped>
.box {
  /* display: flex; */
  /* flex-direction: column; */
  /* justify-content: space-between; */
  /* align-items: center; */
  width: 120rem;
  height: 67.5rem;
  background-image: url("../assets/Beijing-Zongbeijing2.png");
  /* background-size: 100% 100%; */
  background-size: cover;
  background-repeat: no-repeat;
  background-color: transparent;
  padding: 0 0.5rem;
}
.top {
  flex: 1;
  width: 119rem;
}
.box-middle {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
  width: 119rem;
  height: 56.25rem;
}
.left {
  align-self: flex-start;
}
.right {
  align-self: flex-start;
}
.bottom {
  width: 62.5rem;
  margin: auto;
  /* margin-bottom: 2rem; */
  margin-top: -5rem;
  /* margin-bottom: 5rem; */
}
.slide2-enter-active,
.slide2-leave-active {
  transition: all 0.5s;
}
.slide2-enter,
.slide2-leave-to {
  transform: translateX(100%);
}
/* .slide2-enter,
.slide2-enter-to {
  transform: translateX(100%);
} */
.slide1-enter-active,
.slide1-leave-active {
  transition: all 0.5s;
}
.slide1-enter,
.slide1-leave-to {
  transform: translateX(-100%);
}
/* .slide1-enter,
.slide1-enter-to {
  transform: translateX(-100%);
} */
.slide3-enter-active,
.slide3-leave-active {
  transition: all 0.5s;
}
.slide3-enter,
.slide3-leave-to {
  transform: translateY(100%);
}
</style>